<template>
  <div class="attendance-management" ref="container">
  <!-- <div ref="chart" style="height: 21vh; width: 100%"></div> -->
    <div class="form-list">
      <div class="back-link">
        <router-link to="/main/renshi/kaoqing"
          ><i class="el-icon-arrow-left"></i>返回</router-link
        >
      </div>
      <span>
        <div class="header">
          <h2><i class="el-icon-warning"></i>考勤异常处理相关表单</h2>
        </div>
        <div class="form-item">
          <router-link
            class="form-link"
            to="/main/renshi/kaoqing/kqguanli/kqyichanggl"
            >考勤异常确认表</router-link
          >
        </div>
        <!-- <div class="form-item">
                <router-link class="form-link" to="/main/renshi/kaoqing/kqguanli/huizong">考勤汇总表</router-link>
            </div> -->
        <div class="form-item">
          <router-link class="form-link" to="/main/renshi/kaoqing/churu"
            >员工临时出入登记表</router-link
          >
        </div>
        <div class="form-item">
          <router-link class="form-link" to="/main/renshi/kaoqing/gwwaichu"
            >公务外出申请单</router-link
          >
        </div>
        <div class="form-item">
          <router-link class="form-link" to="/main/renshi/kaoqing/ycchuqin"
            >异常出勤签录申请单</router-link
          >
        </div>
        <div class="form-item">
          <router-link
            class="form-link"
            to="/main/renshi/renshizhidu/skyichangdj/skyichangdj"
            >刷卡异常登记表
          </router-link>
        </div>
      </span>
    </div>
  </div>
</template>
<!-- <script>
export default {
  mounted() {
    this.checkScrollbar();
    window.addEventListener("resize", this.checkScrollbar);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.checkScrollbar);
  },
  methods: {
    checkScrollbar() {
      const div = this.$refs.chart;
      const div2 = this.$refs.container;
      if (document.body.scrollHeight > window.innerHeight) {
        div.style.display = "none";
        //div2加一个样式justify-content: center;
        div2.style.justifyContent = "center";
      } else {
        div.style.display = "block";
        //div2取消一个样式justify-content: center;
        div2.style.justifyContent = "";
      }
    },
  },
}; 
</script>-->
<style scoped lang="scss">
.attendance-management {
  font-family: "宋体", sans-serif;
  padding: 40px;
  /* background-color: #f9f9f9; */
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  min-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.back-link {
  position: relative;
  width: 100%;
  display: inline-flex;
  top: 10px;
  left: 10px;

  a.router-link-active {
    text-decoration: none;
    color: #409eff;
    /* font-size: 14px; */
    transition: color 0.3s;
  }
}

.back-link:hover {
  color: #3a8ee6;
}

.header {
  margin: 70px 0px 40px 0px;
}

.header h2 {
  margin: 0;
  color: #333;
  font-size: 24px;
}

.form-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  /* padding: 25px; */
  width: 800px;
  margin: 0 auto;
  height: 494.4px;
}

.form-item {
  width: 100%;
  padding: 10px 0;
  text-align: center;
}

.form-link {
  text-decoration: none;
  color: #333;
  font-size: 16px;
  transition: color 0.3s;
}

.form-link:hover {
  color: #409eff;
  text-decoration: underline;
}
</style>